<template>
  <div>
  <div class="card">
    <div class="card-header">学习计划表</div>
    <div class="card-body">
      <form @submit.prevent="add">
        <div class="row g-4">
          <div class="col-auto">
            <div class="input-grop mb-3">
            <span class="input-group-text" id="basic-addon1">学习科目</span>
            <input type="text" class="form-control" placeholder="请输入学习科目" v-model.trim="subject">
          </div>
          </div>
          <div class="col-auto">
            <div class="input-grop mb-3">
            <span class="input-group-text" id="basic-addon1">学习内容</span>
            <textarea class="form-control" v-model.trim="content" placeholder="请输入学习科目" :style="{height:'32px'}"></textarea>
            </div>
          </div>
          <div class="col-auto">
            <div class="input-grop mb-3">
              <span class="input-group-text" id="basic-addon1">学习地点</span>
              <select class="form-select dorm-select-sm" v-model="selectOption">
                <option v-for="option in options" :key="option.placeCode" :value="selectOption">
                  {{ option.place }}
                </option>
              </select>
            </div>
          </div>
          <div class="col-auto">
            <button type="submit" class="btn btn-primary">添加</button>
          </div>
        </div>
      </form>
    </div>
  </div>
  <table class="table table-striped table-hover table-bordered">
    <thead>
      <tr>
      <th scope="col">序号</th>
      <th scope="col">学习科目</th>
      <th scope="col">学习内容</th>
      <th scope="col">学习地点</th>
      <th scope="col">完成状态</th>
      <th scope="col">操作</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="item in list" :key="item.id">
        <td>{{ item.id }}</td>
        <td>{{ item.subject }}</td>
        <td>{{ item.content }}</td>
        <td>{{ item.place }}</td>
        <td>
          <div class="form-check form-switch">
            <input type="checkbox" class="form-check-input" role="switch"  v-model="item.status" :id="'cb'+item.id">
            <label class="form-check-label"  v-if="item.status" :for="'cb'+item.id">已完成</label>
            <label class="form-check-label"  v-else :for="'cb'+item.id">未完成</label>
          </div>
        </td>
        <td><a href="javascript:;" @click="remove(item.id,item.status)">删除</a></td>
      </tr>
    </tbody>
  </table></div>
</template>

<script setup>
import{ref} from 'vue'
const list =ref([
  {
    id:'1',
    subject:'Vue.jsq前端开发实战',
    content:'学习指令，例如v-if,v-for,v-model等',
    place:'自习室',
    status:false
  }
  ]);
  let subject=ref('')
  let content=ref('')
  let nextId=ref('')
  let selectedOption=ref('自习室')
  let options=ref([
    {placeCode:0,place:'自习室'},
    {placeCode:0,place:'图书馆'},
    {placeCode:0,place:'宿舍'}
    ])
  let remove=(id,status)=>{
    if(status){
      list.value=list.value.filter(item=>item.id!==id)
    }else{
      alert('未完成的学习任务不能删除')
      return
    }
  }
  let add=()=>{
    if(!subject.value.trim()||!content.value.trim()){
      alert('学习科目和学习内容不能为空')
      return
    }
    nextId.value=Math.max(...list.value.map(item=>item.id))+1;
    list.value.push({
      id:nextId.value,
      subject:subject.value,
      content:content.value,
      place:selectedOption.value,
      status:false
    })
    subject.value=''
    content.value=''
    selectedOption.value='自习室'
  }
</script>

<style scoped>
</style>